<template>
	<view class="warnest-pay">
		<!-- 时间轴 -->
		<time-line :processIndex="2" />
		<view class="black-case"></view>
		<!-- 个人信息 -->
		<view class="personal-info">
			<icon class="icon-address-xinxi"></icon>
			<view class="info-right">
				<view class="info-name-phone">
					<text>{{ detail.buyer }}</text>
					<text>{{ detail.phone }}</text>
				</view>
				<view class="info-address">{{ detail.address }}</view>
			</view>
		</view>
		<view class="black-case"></view>
		<!-- 信息 -->
		<view class="warnest-pay-money-case">
			<view class="shop-info-case">
				<image class="shop-info-case-left" :src="detail.img ? `${IMG_URL + detail.img}` : detail.cover" mode="aspectFill"></image>
				<view class="shop-info-case-right">
					<view class="shop-info-case-name">{{detail.name}}</view>
					<view class="shop-info-case-price">总价¥{{ detail.all_pay }}，定金¥{{ detail.first_pay }}</view>
					<view class="shop-info-case-lab">10天健康担保</view>
				</view>
			</view>
			<view class="warnest-pay-money-DJ">
				<view class="dj-text">定金</view>
				<view class="dj-price">
					￥
					<text>{{ detail.first_pay }}</text>
				</view>
			</view>
			<view class="warnest-pay-money-WK">
				<view class="wk-text">尾款</view>
				<view class="wk-price">
					￥
					<text>{{ detail.left_pay }}</text>
				</view>
			</view>
			<!-- <view class="warnest-pay-tishi">请在客服协商的时间支付尾款</view>
			<view class="distribution-case">
				<text>配送方式</text>
				<text>{{ detail.shipping_name }}</text>
				<view class="distribution-price">
					￥
					<text>{{ detail.shipping_fee }}</text>
				</view>
			</view> -->
		</view>
		<!-- 底部按钮 -->
		<view class="warnest-pay-bottom">
			<view class="warnest-pay-bottom-price">
				合计(不含运费)：
				<text>￥</text>
				<text>{{ detail.first_pay }}</text>
			</view>
			<button class="warnest-pay-bottom-btn" @click="submitOrder">提交订单</button>
		</view>
	</view>
</template>

<script>
const app = getApp();
import TimeLine from '../components/timeLine/timeLine.vue';
import { firstPay } from '@/api/buyCat.js';
import { payWeddding } from '@/api/index.js';
export default {
	components: {
		TimeLine
	},
	data() {
		return {
			IMG_URL: app.globalData.IMG_URL,
			goods_id: '', //商品id
			detail: {}
		};
	},
	methods: {
		// 获取订单信息
		async firstPay() {
			const res = await firstPay({
				goods_id: this.goods_id,
				openid: app.globalData.openid
			});
			res.all_pay = Number(res.first_pay) + Number(res.left_pay) + Number(res.shipping_fee);
			this.detail = res;
		},
		// 提交订单
		submitOrder() {
			payWeddding({
				openid: app.globalData.openid,
				cat_id: this.detail.cat_id,
				type: 1
			}).then(res => {
				if (typeof res == 'string') {
					res = JSON.parse(res.trim());
				}
				uni.requestPayment({
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.package,
					signType: res.signType,
					paySign: res.paySign,
					success: () => {
						uni.showToast({
							title: '支付成功',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateTo({
								url: `/pagesBuyCat/freeMedical/freeMedical?goods_id=${this.goods_id}`
							});
						}, 2000);
					},
					fail(err) {
						console.log(err, 111)
					}
				});
			});
		}
	},
	onLoad(options) {
		this.goods_id = options.goods_id;
		this.firstPay();
	}
};
</script>

<style scoped lang="scss">
.warnest-pay {
	padding-top: 156rpx;
	.personal-info {
		padding: 30rpx;
		display: flex;
		.icon-address-xinxi {
			width: 60rpx;
			height: 60rpx;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-address-xinxi.png) no-repeat;
			background-size: cover;
			margin-right: 24rpx;
			margin-top: 8rpx;
		}
		.info-right {
			flex: 1;
			.info-name-phone {
				margin-bottom: 12rpx;
				font-size: 24rpx;
				color: #999999;
				line-height: 32rpx;
				& > text:nth-of-type(1) {
					font-size: 28rpx;
					color: #333333;
					margin-right: 12rpx;
				}
			}
			.info-address {
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
			}
		}
	}
	.warnest-pay-money-case {
		padding: 36rpx 30rpx 0;
		.shop-info-case {
			display: flex;
			margin-bottom: 60rpx;
			.shop-info-case-left {
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
				margin-right: 28rpx;
			}
			.shop-info-case-right {
				flex: 1;
				.shop-info-case-name {
					font-size: 32rpx;
					font-weight: 600;
					color: #171717;
					line-height: 44rpx;
					margin-bottom: 12rpx;
				}
				.shop-info-case-price {
					font-size: 24rpx;
					color: #999999;
					line-height: 32rpx;
					margin-bottom: 12rpx;
				}
				.shop-info-case-lab {
					padding: 0 8rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: rgba(250, 131, 132, 0.2);
					border-radius: 8rpx;
					font-size: 24rpx;
					color: #ff6465;
					display: inline-block;
				}
			}
		}
		.warnest-pay-money-DJ {
			height: 60rpx;
			margin-left: 44rpx;
			border-left: 4rpx solid #fa8384;
			position: relative;
			box-sizing: border-box;
			&::after {
				content: '';
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background: #fa8384;
				position: absolute;
				top: -8rpx;
				left: -10rpx;
			}
			.dj-text {
				font-size: 28rpx;
				font-weight: 500;
				color: #fa8384;
				line-height: 28rpx;
				position: absolute;
				top: -14rpx;
				left: 22rpx;
			}
			.dj-price {
				font-size: 24rpx;
				font-weight: bold;
				color: #fa8384;
				line-height: 36rpx;
				position: absolute;
				top: -22rpx;
				right: 0;
				& > text {
					font-size: 44rpx;
				}
			}
		}
		.warnest-pay-money-WK {
			height: 60rpx;
			margin-left: 44rpx;
			border-left: 4rpx solid #cecece;
			position: relative;
			box-sizing: border-box;
			&::after {
				content: '';
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background: #cecece;
				position: absolute;
				bottom: -8rpx;
				left: -10rpx;
			}
			.wk-text {
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
				line-height: 28rpx;
				position: absolute;
				bottom: -14rpx;
				left: 22rpx;
			}
			.wk-price {
				font-size: 24rpx;
				font-weight: bold;
				color: #666666;
				line-height: 36rpx;
				position: absolute;
				bottom: -22rpx;
				right: 0;
				& > text {
					font-size: 44rpx;
				}
			}
		}
		.warnest-pay-tishi {
			font-size: 28rpx;
			color: #999999;
			margin-top: 70rpx;
		}
		.distribution-case {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			margin-top: 40rpx;
			& > text:nth-of-type(1) {
				color: #333333;
				margin-right: 32rpx;
			}
			& > text:nth-of-type(2) {
				color: #999999;
				margin-right: auto;
			}
			.distribution-price {
				font-size: 24rpx;
				font-weight: bold;
				color: #666666;
				& > text {
					font-size: 44rpx;
				}
			}
		}
	}
	.warnest-pay-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #ffffff;
		height: 112rpx;
		padding: 0 30rpx 68rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.warnest-pay-bottom-price {
			font-size: 32rpx;
			color: #333333;
			& > text:nth-of-type(1) {
				font-size: 34rpx;
				font-weight: bold;
				color: #fa8384;
			}
			& > text:nth-of-type(2) {
				font-size: 56rpx;
				font-weight: bold;
				color: #fa8384;
			}
		}
		.warnest-pay-bottom-btn {
			margin: 0 0 0 20rpx;
			padding: 0;
			width: 230rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: #fa8384;
			border-radius: 12rpx;
			font-size: 24rpx;
			font-weight: 600;
			color: #ffffff;
		}
	}
	.black-case {
		width: 100%;
		height: 16rpx;
		background: #f2f2f2;
	}
}
</style>
